
// 布局样式
.container {
  width: 100%;
  height: 100vh;
  display: flex;
  // 左侧样式
  .left {
    width: 200px;
    transition: width .5s;
    // background: green;
    display: flex;
    flex-direction: column;
    .left-head {
      // background: linear-gradient(to left bottom , blue, $color);
      height: 60px;
      text-align: center;
      box-sizing: border-box;
      padding-top: 5px;
      & > img {
        box-sizing: border-box;
        width: 170px;
        height: 50px;
        padding-top: 5px;
      }
    }
    .slider {
      flex: 8;
      // height: 90%;
      // background: cyan;
      background: white;
      position: relative;
      overflow-y: auto;
      user-select: none;
      .sidebar-btn {
        position: absolute;
        bottom: 0;
        left: 0;
        height: 5%;
        width: 100%;
        text-align: right;
        // background: blue;
        > i {
          padding-right: 15px;
        }
      }
    }
    .left-width {
          transition: width .5s;
          width: 100%;
          // width: 128px;
        }
  }
  .left-content-width {
    width: 80px;
    transition: width .5s;
  }
  
  // 右侧样式
  .right {
    width: calc(100% - 200px);
    transition: width .5s;
    background: #ebeef5;
    display: flex;
    flex-direction: column;
    .right-top {
      height: 60px;
      background: white;
      box-shadow: 0 0 2px #ccc;
    }
    .main-content {
      height: calc(100% - 60px);
      padding: 20px;
      overflow-y: auto;
      position: relative;
      box-sizing: border-box;
    }
  }

  .right-content-width {
    width: calc(100% - 80px);
    transition: width .5s;
  }
}



